<template>
	<view>
		<view class="u-p-t-30 u-p-l-30 u-p-r-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索可回收物" :show-action="false" shape="square" clearabled @change="getList(pid)"></u-search>
				</view>
				<view class="u-p-l-30">
					<button size="mini" @click="createCatalogue" class="u-h-64" style="display: block;">
						<view class="u-flex u-align-items u-justify-content u-h-60">
							<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
							<text class="u-p-l-10 u-tips-color">新建</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="main">
			<!-- 类型导航 -->
			<scroll-view class="breadcrumb" :scroll-x="true">
				<view class="u-flex">
					<view class="item"><text class="u-tips-color u-font-24">类型导航：</text></view>
					<view
						v-for="(item, index) in breadcrumbList" 
						:key="index"
						@click="handleBreadcrumbClick(item, index)"
						class="item"
						:class="{ 'is-last': index === breadcrumbList.length - 1 }"
					>
						<text>{{ item.name }}</text>
						<text class="u-p-l-15 u-p-r-15">
							<u-icon name="arrow-right" class="u-tips-color" v-if="index != breadcrumbList.length - 1"></u-icon>
						</text>
					</view>
				</view>
			</scroll-view>
			<!-- 类型列表 -->
			<view class="table-list">
				<view class="tr u-border-bottom">
					<view class="th"><text>类型名称</text></view>
					<view class="th u-text-center"><text>排序</text></view>
					<view class="th u-text-center"><text>是否启用</text></view>
					<view class="th u-text-right"><text>操作</text></view>
				</view>
				<view 
					class="tr u-border-bottom"
					v-for="(item,index) in list"
					:key="index"
					:class="item.usestate == '已冻结'?'none':''"
				>
					<view class="td" @click="details(item)">
						<view class="u-flex">
							<!-- <image :src="item.icon?fileURL+item.icon:'/static/images/noImg.png'" class="img u-m-r-15"></image> -->
							<view>
								<view><text class="links">{{item.name}}</text></view>
								<!-- <view><text class="u-tips-color u-font-24">有{{item.smallTypePrice.length}}个下属可回收物</text></view> -->
							</view>
						</view>
					</view>
					<view class="td u-text-center" @click="details(item)">
						<text class="u-font-24">{{item.sort}}</text>
					</view>
					<view class="td u-text-center">
						<!-- <text class="u-font-24">{{item.usestate}}</text> -->
						<u-switch v-model="item.state" size="40" @change="switchState($event, item.id)"></u-switch>
					</view>
					<view class="td u-text-right">
						<text class="links u-font-24" @click.stop="getList(item.id,item)">下级</text>
						<text class="divider"></text>
						<text class="links u-font-24" @click.stop="toMove(item)">移动</text>
					</view>
				</view>
			</view>
			<view class="u-p-30">
				<u-loadmore :status="loadStatus" />
			</view>
		</view>

		<!-- 移动类型 -->
		<u-popup v-model="moveToDialogVisible" mode="bottom" length="100%">
			<view class="u-flex u-p-30">
				<view @click="moveToDialogVisible = false"><text>取消</text></view>
				<view class="u-flex-1 u-text-center"><text>移动到</text></view>
				<view @click="handleToMove"><text class="link">确定</text></view>
			</view>
			<multi-select 
				:options="treeData" 
				:load-data="loadChildrenData"
				v-model="selected"
			/>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				selected: {},
				treeData: [
					{
						name: '一级类型',
						id: 0,
						isChoose: false,
						isLeaf: false // 明确标记是否为叶子节点
					}
				],
				background: {
					backgroundColor: "#10beca",
		
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/xxx.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
		
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				key: '',
				loadStatus: 'loading ',
				list: [],
				categoryTypeObj: {
					icon: ""
				},
				// 面包屑导航数组
				breadcrumbList: [
					{
						name: '一级类型',
						pid: 0
					}
				], 
				pid: 0, //下级类型id
				// 移动至
				moveToDialogVisible: false,
				moveTo:{
					id: 0,
					toId: 0
				}
			}
		},
		onShow() {
			this.getList(this.pid)
		},
		watch:{
			selected(val){
				console.log('selected:',val)
				this.moveTo.toId = val.id
			}
		},
		computed: {
			...mapState({
				franchiseId: state => state.franchiseId,
				operatorid: state => state.operatorid
			}),
			// 是否运营商管理员
			isOperatorAdmin(){
				return this.userdetail.bindinfo.operator.ismanager
			}
		},
		methods: {
			// onNavigationBarButtonTap(e) {
			// 	if(e.index == 0){
			// 		if(this.$hasPerm('030101')){
			// 			uni.navigateTo({
			// 				url: '/pages/admin/priceSetting/create/create'
			// 			})
			// 		}else{
			// 			uni.showToast({
			// 				title: '您没有权限操作',
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}
			// },
			async loadChildrenData(node) {
				try {
					const res = await this.$u.get('/Waste/type/List', {
						operatorid: this.operatorid,
						pid: node.id,
						key: node.key
					})
					return res.map(item => ({
						...item,
						// isLeaf: item.levelType === 4 // 根据业务逻辑判断是否为末级
					})).filter((cell)=>cell.usestate == '已启用')
				} catch (e) {
					this.$u.toast('加载失败')
					return []
				}
			},
			// 移动类型
			toMove(row){
				this.moveTo.id = row.id
				this.moveTo.toId = 0
				this.moveToDialogVisible = true
			},
			// 提交移动类型
			handleToMove(){
				this.$u.post('/Waste/Type/Move',{
					"id": this.moveTo.id,
					"toId": this.moveTo.toId
				}).then(()=>{
					this.moveToDialogVisible = false
					uni.showToast({
						title: '移动成功'
					})
					this.getList(this.pid,this.categoryTypeObj,true)
				})
			},
			getList(pid, categoryTypeObj, isSearch = false){
				this.list = []
				this.pid = pid
				// 当进入下级时更新面包屑
				if(pid > 0 && isSearch == false && categoryTypeObj) {
					this.breadcrumbList.push({
						...categoryTypeObj
					})
				}
				if(categoryTypeObj){
					this.categoryTypeObj = categoryTypeObj
				}else{
					this.categoryTypeObj = {}
				}
				// 获取列表
				this.loadStatus = 'loading'
				this.$u.get(`/Waste/Type/List?pid=${this.pid}&Key=${this.key}`).then((res)=>{
					let list = res
					list.forEach((item) => {
						if (item.usestate == '已启用') {
							item.state = true
						} else {
							item.state = false
						}
					})
					// Promise.all(res.map((item,i)=>{
					// 	return new Promise((resolve,reject)=>{
					// 		this.getSmallTypePrice(item.id).then((arr)=>{
					// 			list[i].smallTypePrice = arr
					// 			// setTimeout(()=>{
					// 				resolve()
					// 			// },2000)
					// 		})
					// 	})
					// })).then(()=>{
					// 	this.list = list
					// 	this.loadStatus = 'nomore'
					// 	console.log('this.list',this.list)
					// })
					
					this.loadStatus = 'nomore'
					this.list = res
					return res
				})
			},
			getSmallTypePrice(id){
				return this.$u.get(`/Waste/Product/List?typeId=${id}`).then((res)=>{
					return res
				})
			},
			details(item){
				uni.navigateTo({
					url:`views/views?id=${item.id}&name=${item.name}&sort=${item.sort}&icon=${item.icon}`
				})
			},
			createCatalogue(){
				uni.navigateTo({
					url: "create/create"
				})
			},
			// 点击面包屑项
			handleBreadcrumbClick(item, index) {
				// 点击的不是最后一项时才允许跳转
				if(index < this.breadcrumbList.length - 1) {
					// 如果是根节点
					if(index === 0) {
						this.getList(0)
						this.breadcrumbList = this.breadcrumbList.slice(0, 1)
					} else {
	
						// 这里需要根据你的接口实现获取父级数据
						this.getList(item.id,item) 
						this.breadcrumbList = this.breadcrumbList.slice(0, index + 1)
					}
				}
			},
			//修改状态
			switchState(event, id) {
				this.$u.post(`/Waste/Type/SetState`, {
					ids: [id],
					state: event ? 2 : 1
				}).then((res) => {
					if (res.status == 0) {
						uni.showToast({
							title: res.msg
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					this.getList(this.pid)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		// background-color: #fff;
	}
	.breadcrumb{
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.u-flex{
			height: 40rpx;
			.item{
				display: flex;
				height: 40rpx;
				white-space: nowrap;
			}
		}
	}
	.img{
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}
	.title{
		align-items: center;
	}
	.order-list{
		&.none{
			opacity: 0.6;
			color: $u-tips-color;
		}
	}
	.order-content .order-list .label .u-flex{
		flex-wrap: wrap;
	}
	.order-content .order-list .label .u-flex .cell{
		width: 33.33%;
		flex: none;
		margin-bottom: 20rpx;
	}
	.table-list{
		background-color: #fff;
		padding: 0 20rpx;
		.tr{
			display: flex;
			align-items: center;
			&:active{
				opacity: 0.6;
			}
			.th{
				flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
	}
</style>
